﻿<div class="row" data-ng-init="admin=false" >
     <div id="loadingWidget" class="row-fluid ui-corner-all" style="padding: 0 .7em;" loading-widget >
        <div class="loadingContent">
            <p>
                <img alt="Loading  Content" src="images/ajax-loader.gif" />&nbsp;Loading
            </p>
        </div>
    </div>
    <div class="col-md-12 home" >
        <div class="row">
            <!--<div data-ng-controller="adminCtrl" >
                <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)" >{{alert.msg}}</alert>
            </div>-->
            
            <div class="jumbotron" data-ng-cloak>
                <h2>{{desc}}</h2>
                <table class="table table-striped table-bordered table-condensed">
                    <thead>
                        <tr>
                            <th style="width: 100px;">
                                <div class="btn-toolbar"><i class="btn glyphicon glyphicon-plus" data-ng-click="toggleAddMode()"></i></div>
                            </th>
                            <th width="67%">Title</th>
                            <th width="23%">Color</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr data-ng-show="addMode" ng-model="admin">
                            <td>
                                <div class="btn-toolbar">
                                    <div class="btn-group">
                                        <i class="btn glyphicon glyphicon-save" data-ng-click="addAdmin()"></i>
                                        <i class="btn glyphicon glyphicon-remove" ng-click="toggleAddMode()"></i>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <input type="text" title="{{admin.title}}" ng-model="admin.title" required />
                            </td>
                            <td>
                                <input type="color" title="{{admin.color}}" ng-model="admin.color" required />
                            </td>
                        </tr>
                        <tr data-ng-repeat="admin in admins | orderBy:'title'">
                            <td>
                                <div class="btn-toolbar" data-ng-show="admin.editMode == null || admin.editMode == false">
                                    <div class="btn-group">
                                        <i class="btn glyphicon glyphicon-edit" data-ng-click="toggleEditMode(admin)"></i>
                                        <i class="btn glyphicon glyphicon-trash" data-ng-click="deleteAdmin(admin)"></i>
                                    </div>
                                </div>
                                <div class="btn-toolbar" data-ng-show="admin.editMode == true">
                                    <div class="btn-group">
                                        <i class="btn glyphicon glyphicon-save" data-ng-click="updateAdmin(admin)"></i>
                                        <i class="btn glyphicon glyphicon-remove" data-ng-click="toggleEditMode(admin)"></i>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span data-ng-show="admin.editMode == null || admin.editMode == false">{{admin.title}}</span>
                                <input type="text" data-ng-show="admin.editMode == true" title="{{admin.title}}" ng-model="admin.title" required>
                            </td>
                            <td>
                                <span id="{{admin.color}}" style="width: 100px; border-color: #d4d4d4;  border-width: 1px; border-style: solid; background-color: {{admin.color}};" data-ng-show="admin.editMode == null || admin.editMode == false">_____________</span>
                               <!--<label style="background-color: ; " title="{{admin.color}}"  />-->
                                <input type="color" title="{{admin.color}}" data-ng-model="admin.color" data-ng-show="admin.editMode == true" required />
                            </td>

                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
